<template>
  <div id="infoContainer">
    <div class="info" ref="info">
      123
      <div class="infoContent"></div>
    </div>
    <div class="noInfo" ref="noInfo"></div>
  </div>
</template>

<script>
export default {
  name: "Info",
  data() {
    return {}
  },
  mounted() {
    this.$refs.noInfo.addEventListener('click',()=>{
      this.$refs.info.style.display='none'
      this.$router.push('/square')
      this.$bus.$emit('showNav',true)
    })
  }
}
</script>

<style scoped>
#infoContainer {
  width: 100%;
  height: 844px;
  display: flex;
  overflow: hidden;
}
.info {
  width: 80%;
  height: 844px;
  background-color: white;
  position: relative;
  background-color: #acf8f5;
}
.infoContent {
  width: 100%;
  position: absolute;
  bottom: -50px;
  height: 700px;
  background-color: white;
  border-radius: 10%;
}

.noInfo{
  width: 20%;
  height: 844px;
  opacity: 0;
}
</style>